రియాక్ట్ కాంకరెంట్ రెండరింగ్: ఫైబర్ ఆర్కిటెక్చర్ మరియు వర్క్ లూప్ విశ్లేషణతో పనితీరును అన్‌లాక్ చేయడం

ఫ్రంట్-ఎండ్ డెవలప్‌మెంట్‌లో ఒక ప్రముఖ శక్తి అయిన రియాక్ట్, పెరుగుతున్న సంక్లిష్టమైన మరియు ఇంటరాక్టివ్ యూజర్ ఇంటర్‌ఫేస్‌ల డిమాండ్లను తీర్చడానికి నిరంతరం అభివృద్ధి చెందింది. ఈ పరిణామంలో అత్యంత ముఖ్యమైన పురోగతిలో ఒకటి కాంకరెంట్ రెండరింగ్, ఇది రియాక్ట్ 16తో పరిచయం చేయబడింది. ఈ పారాడిగ్మ్ షిఫ్ట్, రియాక్ట్ అప్‌డేట్‌లను ఎలా నిర్వహిస్తుంది మరియు కాంపోనెంట్‌లను రెండర్ చేస్తుంది అనే విధానాన్ని ప్రాథమికంగా మార్చింది, గణనీయమైన పనితీరు మెరుగుదలలను అన్‌లాక్ చేసింది మరియు మరింత ప్రతిస్పందించే వినియోగదారు అనుభవాలను సాధ్యం చేసింది. ఈ వ్యాసం కాంకరెంట్ రెండరింగ్ యొక్క ప్రధాన భావనలను లోతుగా పరిశీలిస్తుంది, ఫైబర్ ఆర్కిటెక్చర్ మరియు వర్క్ లూప్‌ను అన్వేషిస్తుంది మరియు ఈ యంత్రాంగాలు సున్నితమైన, మరింత సమర్థవంతమైన రియాక్ట్ అప్లికేషన్‌లకు ఎలా దోహదపడతాయో అంతర్దృష్టులను అందిస్తుంది.

కాంకరెంట్ రెండరింగ్ యొక్క అవసరాన్ని అర్థం చేసుకోవడం

కాంకరెంట్ రెండరింగ్‌కు ముందు, రియాక్ట్ సింక్రోనస్ పద్ధతిలో పనిచేసేది. ఒక అప్‌డేట్ జరిగినప్పుడు (ఉదాహరణకు, స్టేట్ మార్పు, ప్రాప్ అప్‌డేట్), రియాక్ట్ మొత్తం కాంపోనెంట్ ట్రీని ఒకే, అంతరాయం లేని ఆపరేషన్‌లో రెండర్ చేయడం ప్రారంభిస్తుంది. ఈ సింక్రోనస్ రెండరింగ్ పనితీరు అడ్డంకులకు దారితీస్తుంది, ముఖ్యంగా పెద్ద కాంపోనెంట్ ట్రీలతో లేదా గణనపరంగా ఖరీదైన ఆపరేషన్లతో వ్యవహరించేటప్పుడు. ఈ రెండరింగ్ సమయాల్లో, బ్రౌజర్ ప్రతిస్పందించకుండా పోతుంది, ఇది ఒక జంకీ మరియు నిరాశాజనకమైన వినియోగదారు అనుభవానికి దారితీస్తుంది. దీనిని తరచుగా "మెయిన్ థ్రెడ్‌ను బ్లాక్ చేయడం" అని అంటారు.

ఒక వినియోగదారు టెక్స్ట్ ఫీల్డ్‌లో టైప్ చేస్తున్న దృశ్యాన్ని ఊహించుకోండి. టైప్ చేసిన టెక్స్ట్‌ను ప్రదర్శించడానికి బాధ్యత వహించే కాంపోనెంట్ ఒక పెద్ద, సంక్లిష్టమైన కాంపోనెంట్ ట్రీలో భాగమైతే, ప్రతి కీస్ట్రోక్ మెయిన్ థ్రెడ్‌ను బ్లాక్ చేసే రీ-రెండర్‌ను ప్రేరేపించవచ్చు. ఇది గుర్తించదగిన లాగ్ మరియు పేలవమైన వినియోగదారు అనుభవానికి దారితీస్తుంది.

కాంకరెంట్ రెండరింగ్, రెండరింగ్ పనులను చిన్న, నిర్వహించదగిన వర్క్ యూనిట్‌లుగా విభజించడానికి రియాక్ట్‌ను అనుమతించడం ద్వారా ఈ సమస్యను పరిష్కరిస్తుంది. ఈ యూనిట్‌లకు ప్రాధాన్యత ఇవ్వవచ్చు, పాజ్ చేయవచ్చు మరియు అవసరమైనప్పుడు పునఃప్రారంభించవచ్చు, ఇది రియాక్ట్‌ను యూజర్ ఇన్‌పుట్ లేదా నెట్‌వర్క్ అభ్యర్థనలను నిర్వహించడం వంటి ఇతర బ్రౌజర్ ఆపరేషన్‌లతో రెండరింగ్ పనులను కలపడానికి అనుమతిస్తుంది. ఈ విధానం మెయిన్ థ్రెడ్‌ను ఎక్కువ కాలం బ్లాక్ చేయకుండా నివారిస్తుంది, దీని ఫలితంగా మరింత ప్రతిస్పందించే మరియు ఫ్లూయిడ్ యూజర్ అనుభవం లభిస్తుంది. దీనిని రియాక్ట్ రెండరింగ్ ప్రక్రియ కోసం మల్టీటాస్కింగ్‌గా భావించండి.

ఫైబర్ ఆర్కిటెక్చర్ పరిచయం

కాంకరెంట్ రెండరింగ్ యొక్క గుండెలో ఫైబర్ ఆర్కిటెక్చర్ ఉంది. ఫైబర్, రియాక్ట్ యొక్క అంతర్గత రీకన్సిలియేషన్ అల్గారిథమ్ యొక్క పూర్తి పునః-అమలును సూచిస్తుంది. మునుపటి సింక్రోనస్ రీకన్సిలియేషన్ ప్రక్రియలా కాకుండా, ఫైబర్ అప్‌డేట్‌లను నిర్వహించడానికి మరియు కాంపోనెంట్‌లను రెండర్ చేయడానికి మరింత అధునాతన మరియు గ్రాన్యులర్ విధానాన్ని పరిచయం చేస్తుంది.

ఫైబర్ అంటే ఏమిటి?

ఒక ఫైబర్‌ను ఒక కాంపోనెంట్ ఇన్‌స్టాన్స్ యొక్క వర్చువల్ ప్రాతినిధ్యంగా భావనపరంగా అర్థం చేసుకోవచ్చు. మీ రియాక్ట్ అప్లికేషన్‌లోని ప్రతి కాంపోనెంట్ సంబంధిత ఫైబర్ నోడ్‌తో అనుబంధించబడి ఉంటుంది. ఈ ఫైబర్ నోడ్‌లు కాంపోనెంట్ ట్రీని ప్రతిబింబించే ఒక ట్రీ నిర్మాణాన్ని ఏర్పరుస్తాయి. ప్రతి ఫైబర్ నోడ్ కాంపోనెంట్, దాని ప్రాప్స్, దాని చిల్డ్రన్, మరియు దాని ప్రస్తుత స్టేట్ గురించి సమాచారాన్ని కలిగి ఉంటుంది. ముఖ్యంగా, ఇది ఆ కాంపోనెంట్ కోసం చేయవలసిన పని గురించి కూడా సమాచారాన్ని కలిగి ఉంటుంది.

ఒక ఫైబర్ నోడ్ యొక్క ముఖ్య లక్షణాలు:

• type: కాంపోనెంట్ రకం (ఉదా., div, MyComponent).
• key: కాంపోనెంట్‌కు కేటాయించిన ప్రత్యేకమైన కీ (సమర్థవంతమైన రీకన్సిలియేషన్ కోసం ఉపయోగిస్తారు).
• props: కాంపోనెంట్‌కు పంపిన ప్రాప్స్.
• child: కాంపోనెంట్ యొక్క మొదటి చైల్డ్‌ను సూచించే ఫైబర్ నోడ్‌కు ఒక పాయింటర్.
• sibling: కాంపోనెంట్ యొక్క తదుపరి సిబ్లింగ్‌ను సూచించే ఫైబర్ నోడ్‌కు ఒక పాయింటర్.
• return: కాంపోనెంట్ యొక్క పేరెంట్‌ను సూచించే ఫైబర్ నోడ్‌కు ఒక పాయింటర్.
• stateNode: వాస్తవ కాంపోనెంట్ ఇన్‌స్టాన్స్‌కు ఒక రిఫరెన్స్ (ఉదా., హోస్ట్ కాంపోనెంట్‌ల కోసం ఒక DOM నోడ్, ఒక క్లాస్ కాంపోనెంట్ ఇన్‌స్టాన్స్).
• alternate: కాంపోనెంట్ యొక్క మునుపటి వెర్షన్‌ను సూచించే ఫైబర్ నోడ్‌కు ఒక పాయింటర్.
• effectTag: కాంపోనెంట్‌కు అవసరమైన అప్‌డేట్ రకాన్ని సూచించే ఒక ఫ్లాగ్ (ఉదా., ప్లేస్‌మెంట్, అప్‌డేట్, డిలీషన్).

ఫైబర్ ట్రీ

ఫైబర్ ట్రీ అనేది అప్లికేషన్ యొక్క UI యొక్క ప్రస్తుత స్థితిని సూచించే ఒక పర్సిస్టెంట్ డేటా స్ట్రక్చర్. ఒక అప్‌డేట్ జరిగినప్పుడు, రియాక్ట్ బ్యాక్‌గ్రౌండ్‌లో ఒక కొత్త ఫైబర్ ట్రీని సృష్టిస్తుంది, ఇది అప్‌డేట్ తర్వాత UI యొక్క కావలసిన స్థితిని సూచిస్తుంది. ఈ కొత్త ట్రీని "వర్క్-ఇన్-ప్రోగ్రెస్" ట్రీ అని అంటారు. వర్క్-ఇన్-ప్రోగ్రెస్ ట్రీ పూర్తయిన తర్వాత, రియాక్ట్ దానిని ప్రస్తుత ట్రీతో మార్పిడి చేస్తుంది, మార్పులను వినియోగదారుకు కనిపించేలా చేస్తుంది.

ఈ డ్యూయల్-ట్రీ విధానం రియాక్ట్‌ను నాన్-బ్లాకింగ్ పద్ధతిలో రెండరింగ్ అప్‌డేట్‌లను చేయడానికి అనుమతిస్తుంది. వర్క్-ఇన్-ప్రోగ్రెస్ ట్రీ బ్యాక్‌గ్రౌండ్‌లో నిర్మించబడుతున్నప్పుడు ప్రస్తుత ట్రీ వినియోగదారుకు కనిపిస్తూ ఉంటుంది. ఇది అప్‌డేట్‌ల సమయంలో UI ఫ్రీజ్ అవ్వకుండా లేదా ప్రతిస్పందించకుండా పోకుండా నివారిస్తుంది.

ఫైబర్ ఆర్కిటెక్చర్ యొక్క ప్రయోజనాలు

• అంతరాయం కలిగించగల రెండరింగ్ (Interruptible Rendering): ఫైబర్ రియాక్ట్‌ను రెండరింగ్ పనులను పాజ్ చేయడానికి మరియు పునఃప్రారంభించడానికి వీలు కల్పిస్తుంది, ఇది వినియోగదారు పరస్పర చర్యలకు ప్రాధాన్యత ఇవ్వడానికి మరియు మెయిన్ థ్రెడ్‌ను బ్లాక్ చేయకుండా నివారించడానికి అనుమతిస్తుంది.
• వృద్ధికర రెండరింగ్ (Incremental Rendering): ఫైబర్ రియాక్ట్‌ను రెండరింగ్ అప్‌డేట్‌లను చిన్న వర్క్ యూనిట్‌లుగా విభజించడానికి అనుమతిస్తుంది, వీటిని కాలక్రమేణా వృద్ధికరంగా ప్రాసెస్ చేయవచ్చు.
• ప్రాధాన్యత (Prioritization): ఫైబర్ రియాక్ట్‌ను వివిధ రకాల అప్‌డేట్‌లకు ప్రాధాన్యత ఇవ్వడానికి అనుమతిస్తుంది, తక్కువ ముఖ్యమైన అప్‌డేట్‌ల (ఉదా., బ్యాక్‌గ్రౌండ్ డేటా ఫెచింగ్) కంటే ముందు క్లిష్టమైన అప్‌డేట్‌లు (ఉదా., వినియోగదారు ఇన్‌పుట్) ప్రాసెస్ చేయబడతాయని నిర్ధారిస్తుంది.
• మెరుగైన ఎర్రర్ హ్యాండ్లింగ్ (Improved Error Handling): ఫైబర్ రెండరింగ్ సమయంలో ఎర్రర్‌లను నిర్వహించడం సులభం చేస్తుంది, ఎందుకంటే ఒక ఎర్రర్ సంభవించినప్పుడు రియాక్ట్‌ను మునుపటి స్థిరమైన స్థితికి రోల్‌బ్యాక్ చేయడానికి ఇది అనుమతిస్తుంది.

వర్క్ లూప్: ఫైబర్ కాంకరెన్సీని ఎలా సాధ్యం చేస్తుంది

వర్క్ లూప్ అనేది కాంకరెంట్ రెండరింగ్‌ను నడిపించే ఇంజిన్. ఇది ఒక రికర్సివ్ ఫంక్షన్, ఇది ఫైబర్ ట్రీని ట్రావర్స్ చేస్తుంది, ప్రతి ఫైబర్ నోడ్‌పై పని చేస్తుంది మరియు UIని వృద్ధికరంగా అప్‌డేట్ చేస్తుంది. వర్క్ లూప్ కింది పనులకు బాధ్యత వహిస్తుంది:

• ప్రాసెస్ చేయడానికి తదుపరి ఫైబర్‌ను ఎంచుకోవడం.
• ఫైబర్‌పై పని చేయడం (ఉదా., కొత్త స్టేట్‌ను లెక్కించడం, ప్రాప్స్‌ను పోల్చడం, కాంపోనెంట్‌ను రెండర్ చేయడం).
• పని యొక్క ఫలితాలతో ఫైబర్ ట్రీని అప్‌డేట్ చేయడం.
• చేయవలసిన మరిన్ని పనులను షెడ్యూల్ చేయడం.

వర్క్ లూప్ యొక్క దశలు

వర్క్ లూప్ రెండు ప్రధాన దశలను కలిగి ఉంటుంది:

1. రెండర్ ఫేజ్ (రీకన్సిలియేషన్ ఫేజ్ అని కూడా అంటారు): ఈ దశ వర్క్-ఇన్-ప్రోగ్రెస్ ఫైబర్ ట్రీని నిర్మించడానికి బాధ్యత వహిస్తుంది. ఈ దశలో, రియాక్ట్ ఫైబర్ ట్రీని ట్రావర్స్ చేస్తుంది, ప్రస్తుత ట్రీని కావలసిన స్థాయితో పోల్చి, ఏ మార్పులు చేయాలో నిర్ణయిస్తుంది. ఈ దశ అసింక్రోనస్ మరియు అంతరాయం కలిగించగలది. DOMలో *ఏమి మార్చాలి* అని ఇది నిర్ణయిస్తుంది.
2. కమిట్ ఫేజ్: ఈ దశ వాస్తవ DOMకు మార్పులను వర్తింపజేయడానికి బాధ్యత వహిస్తుంది. ఈ దశలో, రియాక్ట్ DOM నోడ్‌లను అప్‌డేట్ చేస్తుంది, కొత్త నోడ్‌లను జోడిస్తుంది మరియు పాత నోడ్‌లను తొలగిస్తుంది. ఈ దశ సింక్రోనస్ మరియు అంతరాయం కలిగించలేనిది. ఇది *వాస్తవానికి* DOMను మారుస్తుంది.

వర్క్ లూప్ కాంకరెన్సీని ఎలా సాధ్యం చేస్తుంది

కాంకరెంట్ రెండరింగ్ యొక్క కీలకం రెండర్ ఫేజ్ అసింక్రోనస్ మరియు అంతరాయం కలిగించగలదనే వాస్తవంలో ఉంది. దీని అర్థం, యూజర్ ఇన్‌పుట్ లేదా నెట్‌వర్క్ అభ్యర్థనలు వంటి ఇతర పనులను నిర్వహించడానికి బ్రౌజర్‌ను అనుమతించడానికి రియాక్ట్ రెండర్ ఫేజ్‌ను ఎప్పుడైనా పాజ్ చేయగలదు. బ్రౌజర్ ఖాళీగా ఉన్నప్పుడు, రియాక్ట్ రెండర్ ఫేజ్‌ను అది ఆగిపోయిన చోట నుండి పునఃప్రారంభించగలదు.

రెండర్ ఫేజ్‌ను పాజ్ మరియు పునఃప్రారంభించే ఈ సామర్థ్యం, రియాక్ట్‌ను ఇతర బ్రౌజర్ ఆపరేషన్‌లతో రెండరింగ్ పనులను కలపడానికి అనుమతిస్తుంది, మెయిన్ థ్రెడ్‌ను బ్లాక్ చేయకుండా నివారిస్తుంది మరియు మరింత ప్రతిస్పందించే వినియోగదారు అనుభవాన్ని నిర్ధారిస్తుంది. మరోవైపు, కమిట్ ఫేజ్, UIలో స్థిరత్వాన్ని నిర్ధారించడానికి సింక్రోనస్‌గా ఉండాలి. అయితే, కమిట్ ఫేజ్ సాధారణంగా రెండర్ ఫేజ్ కంటే చాలా వేగంగా ఉంటుంది, కాబట్టి ఇది సాధారణంగా పనితీరు అడ్డంకులకు కారణం కాదు.

వర్క్ లూప్‌లో ప్రాధాన్యత

రియాక్ట్ ఏ ఫైబర్ నోడ్‌లను మొదట ప్రాసెస్ చేయాలో నిర్ణయించడానికి ప్రాధాన్యత-ఆధారిత షెడ్యూలింగ్ అల్గారిథమ్‌ను ఉపయోగిస్తుంది. ఈ అల్గారిథమ్ ప్రతి అప్‌డేట్‌కు దాని ప్రాముఖ్యత ఆధారంగా ఒక ప్రాధాన్యత స్థాయిని కేటాయిస్తుంది. ఉదాహరణకు, యూజర్ ఇన్‌పుట్ ద్వారా ప్రేరేపించబడిన అప్‌డేట్‌లకు సాధారణంగా బ్యాక్‌గ్రౌండ్ డేటా ఫెచింగ్ ద్వారా ప్రేరేపించబడిన అప్‌డేట్‌ల కంటే అధిక ప్రాధాన్యత ఇవ్వబడుతుంది.

వర్క్ లూప్ ఎల్లప్పుడూ అత్యధిక ప్రాధాన్యత ఉన్న ఫైబర్ నోడ్‌లను మొదట ప్రాసెస్ చేస్తుంది. ఇది క్లిష్టమైన అప్‌డేట్‌లు త్వరగా ప్రాసెస్ చేయబడతాయని, ప్రతిస్పందించే వినియోగదారు అనుభవాన్ని అందిస్తుందని నిర్ధారిస్తుంది. తక్కువ ముఖ్యమైన అప్‌డేట్‌లు బ్రౌజర్ ఖాళీగా ఉన్నప్పుడు బ్యాక్‌గ్రౌండ్‌లో ప్రాసెస్ చేయబడతాయి.

ఈ ప్రాధాన్యత వ్యవస్థ, ముఖ్యంగా అనేక ఏకకాల అప్‌డేట్‌లతో కూడిన సంక్లిష్టమైన అప్లికేషన్‌లలో సున్నితమైన వినియోగదారు అనుభవాన్ని నిర్వహించడానికి చాలా కీలకం. ఒక వినియోగదారు సెర్చ్ బార్‌లో టైప్ చేస్తున్నప్పుడు, అదే సమయంలో అప్లికేషన్ సూచించిన సెర్చ్ పదాల జాబితాను ఫెచ్ చేసి ప్రదర్శిస్తున్న దృశ్యాన్ని పరిగణించండి. టెక్స్ట్ ఫీల్డ్ ప్రతిస్పందించేలా ఉండటానికి వినియోగదారు టైపింగ్‌కు సంబంధించిన అప్‌డేట్‌లకు ప్రాధాన్యత ఇవ్వాలి, అయితే సూచించిన సెర్చ్ పదాలకు సంబంధించిన అప్‌డేట్‌లను బ్యాక్‌గ్రౌండ్‌లో ప్రాసెస్ చేయవచ్చు.

ఆచరణలో కాంకరెంట్ రెండరింగ్ యొక్క ఉదాహరణలు

రియాక్ట్ అప్లికేషన్‌ల పనితీరును మరియు వినియోగదారు అనుభవాన్ని కాంకరెంట్ రెండరింగ్ ఎలా మెరుగుపరుస్తుందో కొన్ని ఆచరణాత్మక ఉదాహరణలను పరిశీలిద్దాం.

1. వినియోగదారు ఇన్‌పుట్‌ను డీబౌన్స్ చేయడం

వినియోగదారు టైప్ చేస్తున్నప్పుడు సెర్చ్ ఫలితాలను ప్రదర్శించే ఒక సెర్చ్ బార్‌ను పరిగణించండి. కాంకరెంట్ రెండరింగ్ లేకుండా, ప్రతి కీస్ట్రోక్ మొత్తం సెర్చ్ ఫలితాల జాబితా యొక్క రీ-రెండర్‌ను ప్రేరేపించవచ్చు, ఇది పనితీరు సమస్యలకు మరియు ఒక జంకీ వినియోగదారు అనుభవానికి దారితీస్తుంది.

కాంకరెంట్ రెండరింగ్‌తో, వినియోగదారు కొద్దిసేపు టైప్ చేయడం ఆపే వరకు సెర్చ్ ఫలితాల రెండరింగ్‌ను ఆలస్యం చేయడానికి మనం డీబౌన్సింగ్‌ను ఉపయోగించవచ్చు. ఇది రియాక్ట్‌ను వినియోగదారు ఇన్‌పుట్‌కు ప్రాధాన్యత ఇవ్వడానికి మరియు UI ప్రతిస్పందించకుండా పోకుండా నివారించడానికి అనుమతిస్తుంది.

ఇక్కడ ఒక సరళీకృత ఉదాహరణ:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

ఈ ఉదాహరణలో, debounce ఫంక్షన్ వినియోగదారు 300 మిల్లీసెకన్ల పాటు టైప్ చేయడం ఆపే వరకు సెర్చ్ లాజిక్ యొక్క అమలును ఆలస్యం చేస్తుంది. ఇది అవసరమైనప్పుడు మాత్రమే సెర్చ్ ఫలితాలు రెండర్ చేయబడతాయని నిర్ధారిస్తుంది, అప్లికేషన్ పనితీరును మెరుగుపరుస్తుంది.

2. చిత్రాలను లేజీ లోడ్ చేయడం

పెద్ద చిత్రాలను లోడ్ చేయడం వెబ్ పేజీ యొక్క ప్రారంభ లోడ్ సమయాన్ని గణనీయంగా ప్రభావితం చేస్తుంది. కాంకరెంట్ రెండరింగ్‌తో, చిత్రాలు వ్యూపోర్ట్‌లో కనిపించే వరకు వాటి లోడింగ్‌ను వాయిదా వేయడానికి మనం లేజీ లోడింగ్‌ను ఉపయోగించవచ్చు.

ఈ టెక్నిక్ అప్లికేషన్ యొక్క గ్రహించిన పనితీరును గణనీయంగా మెరుగుపరుస్తుంది, ఎందుకంటే వినియోగదారు పేజీతో ఇంటరాక్ట్ అవ్వడం ప్రారంభించే ముందు అన్ని చిత్రాలు లోడ్ అయ్యే వరకు వేచి ఉండాల్సిన అవసరం లేదు.

react-lazyload లైబ్రరీని ఉపయోగించి ఇక్కడ ఒక సరళీకృత ఉదాహరణ:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

ఈ ఉదాహరణలో, LazyLoad కాంపోనెంట్ చిత్రం వ్యూపోర్ట్‌లో కనిపించే వరకు దాని లోడింగ్‌ను ఆలస్యం చేస్తుంది. placeholder ప్రాప్ చిత్రం లోడ్ అవుతున్నప్పుడు ఒక లోడింగ్ ఇండికేటర్‌ను ప్రదర్శించడానికి మనకు అనుమతిస్తుంది.

3. డేటా ఫెచింగ్ కోసం సస్పెన్స్

రియాక్ట్ సస్పెన్స్ డేటా లోడ్ అయ్యే వరకు వేచి ఉన్నప్పుడు ఒక కాంపోనెంట్ యొక్క రెండరింగ్‌ను "సస్పెండ్" చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది డేటా ఫెచింగ్ దృశ్యాలకు ప్రత్యేకంగా ఉపయోగపడుతుంది, ఇక్కడ మీరు API నుండి డేటా కోసం వేచి ఉన్నప్పుడు ఒక లోడింగ్ ఇండికేటర్‌ను ప్రదర్శించాలనుకుంటున్నారు.

సస్పెన్స్ కాంకరెంట్ రెండరింగ్‌తో సజావుగా ఇంటిగ్రేట్ అవుతుంది, ఇది రియాక్ట్‌ను డేటా లోడింగ్‌కు ప్రాధాన్యత ఇవ్వడానికి మరియు UI ప్రతిస్పందించకుండా పోకుండా నివారించడానికి అనుమతిస్తుంది.

ఇక్కడ ఒక సరళీకృత ఉదాహరణ:

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...